<template>
    <split-horizontal>
        <template v-slot:header-p>
            <div class="j-title">
                emoji选择器（JEmojiPicker）
                <div class="j-detail">emoji表情选择器，支持版本 ^0.8.2</div>
            </div>
        </template>
        <template v-slot:left-p>
            <div class="content">
                <textarea
                    id="JEmojiPickerViewTextArea"
                    v-model="inputValue"
                    style="width: 100%; height: 60px"
                ></textarea>
                <JEmojiPicker
                    @select="selectEmoji"
                    inputId="JEmojiPickerViewTextArea"
                ></JEmojiPicker>
            </div>
        </template>
        <template v-slot:right-p>
            <div>
                <j-table :title="tableTitle" :tableData="tableData"> </j-table>
            </div>
        </template>
        <template v-slot:footer-p>
            <pre v-highlight>
                <code class="vue">
                    <div v-text="code"></div>
                </code>
            </pre>
        </template>
    </split-horizontal>
</template>
<script>
import { mixinForView } from "@/mixins/index.js";
export default {
    name: "JEmojiPickerView",
    components: {},
    mixins: [mixinForView],
    data() {
        return {
            code: "",
            tableData: [
                {
                    parameter: "showFrequentlyUsedList",
                    field: "显示最近常用tab",
                    type: "Boolean",
                    describe: "默认为true",
                },
                {
                    parameter: "inputId",
                    field: "绑定emoji选择器的输入框id",
                    type: "String",
                    describe:
                        "绑定emoji选择器的输入框id，选择emoji后会自动回填到指定的输入框中",
                },
                {
                    parameter: "mode",
                    field: "追加模式",
                    type: "String",
                    describe: "搭配emojiList使用，传入自定义emoji列表",
                },
                {
                    parameter: "emojiList",
                    field: "自定义emoji列表",
                    type: "Array",
                    describe: "传入自定义emoji列表",
                },
                {
                    parameter: "hideList",
                    field: "隐藏的emoji列表",
                    type: "Array",
                    describe: "需要隐藏的emoji列表，传入title数组",
                },
                {
                    parameter: "select",
                    field: "选择emoji后的回调函数",
                    type: "Function",
                    describe: "选择emoji后的回调函数，参数为选中的emoji",
                },
            ],
            inputValue: "",
        };
    },
    created() {
        this.setCode();
    },
    mounted() {},
    methods: {
        selectEmoji(emoji) {
            console.log("%c Line:83 🍤 emoji", "color:#ea7e5c", emoji);
        },
        setCode() {
            this.code = `
<template>
    <div class="content">
        <textarea
            id="JEmojiPickerViewTextArea"
            v-model="inputValue"
            style="width: 100%; height: 60px"
        ></textarea>
        <JEmojiPicker
            @select="selectEmoji"
            inputId="JEmojiPickerViewTextArea"
        ></JEmojiPicker>
    </div>
</template>

< sccript >
export default {
    data() {
        return {
            inputValue: "",
        };
    },
    methods:{
        selectEmoji(emoji) {
            console.log("%c Line:83 🍤 emoji", "color:#ea7e5c", emoji);
        },
    }
}
< /sccript >
            `;
        },
    },
};
</script>
<style scoped lang="less">
.title {
    font-size: x-large;
    text-align: left;
    margin-bottom: 1rem;
    .detail {
        font-size: medium;
        color: dimgrey;
        margin-top: 1rem;
    }
}
.content {
    margin: auto auto;
    // width: 50%;
    max-width: 100%;
}
.header {
    min-height: 4rem;
    text-align: center;
}
.footer {
    margin-top: 2rem;
    margin-left: 2%;
    width: 95%;
}
</style>
